<template>
  <div>
    <div class="login-logo">
      <img src="../assets/logo/logo.png" alt="">
      <div class="login-title">
        <div class="title-main">漏控管理系统</div>
        <div class="title-sub">LEAK MANAGEMENT SYSTEM</div>
      </div>
    </div>
    <div class="login-container">
      <div class="form-container">
        <form @submit.prevent="handleLogin">
          <div class="form-item">
            <input class="input-username" type="text" v-model="loginForm.username" placeholder="请输入登录账号"/>
          </div>
          <div class="form-item">
            <input class="input-password" type="password" v-model="loginForm.password" placeholder="请输入登录密码"/>
          </div>
          <button type="submit">登录</button>
        </form>
      </div>
    </div>
    <!--    <div class="footer">Copyright © 2023 广东青藤环境科技有限公司</div>-->
  </div>
</template>

<script>
import Cookies from "js-cookie";
import {encrypt, decrypt} from '@/utils/jsencrypt'

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: ""
      }
    };
  },
  created() {
    this.getCookie();
    // 重定向地址
    this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined;
  },
  watch: {},
  methods: {
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    checkLoginForm() {
      if (!this.loginForm.username) {
        this.$message.error('请输入登录账号')
        return false
      } else if (!this.loginForm.password) {
        this.$message.error('请输入登录密码')
        return false
      }

      return true
    },
    handleLogin() {
      const valid = this.checkLoginForm();

      if (valid) {
        this.loading = true;
        if (this.loginForm.rememberMe) {
          Cookies.set("username", this.loginForm.username, {expires: 30});
          Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
          Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
        } else {
          Cookies.remove("username");
          Cookies.remove("password");
          Cookies.remove('rememberMe');
        }
        this.$store.dispatch("Login", this.loginForm).then(() => {
          this.$router.push({path: this.redirect || "/"}).catch(() => {
          });
        }).catch(() => {
          this.loading = false;
          if (this.captchaEnabled) {
            this.getCode();
          }
        });
      }
    },
  }
};
</script>

<style scoped>
.login-logo {
  position: absolute;
  left: 82px;
  top: 78px;
  display: flex;
}

.login-logo img {
  width: 64px;
  height: 64px;
}

.login-title {
  padding-left: 15px;
  color: #FFFFFF;
}

.title-main {
  font-size: 28px;
  letter-spacing: 5px;
  text-indent: 2px;
  margin-bottom: 2px;
}

.title-sub {
  font-size: 12px;
  letter-spacing: 1px;
  text-indent: 1px;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("../assets/images/login_v1/login-bg.png");
  background-size: cover;
}

.form-item {
  margin-bottom: 15px;
}

input {
  width: 400px;
  height: 60px;
  padding-left: 50px;
  background-color: #1c3443;
  border: none;
  border-radius: 30px;
  color: #A3AFB7;
  letter-spacing: 2px;
  font-size: 16px;
  text-align: left;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 20px center;
}

.input-username {
  background-image: url("../assets/images/login_v1/login-username-normal.png");

  &:focus {
    background-image: url("../assets/images/login_v1/login-username-focus.png");
  }
}

.input-password {
  background-image: url("../assets/images/login_v1/login-password-normal.png");

  &:focus {
    background-image: url("../assets/images/login_v1/login-password-focus.png");
  }
}

button {
  width: 400px;
  height: 60px;
  padding-right: 65px;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  text-align: right;
  font-size: 18px;
  letter-spacing: 4px;
  border-radius: 30px;
  background: linear-gradient(270deg, rgba(0, 193, 255, 0.5) 0%, rgba(41, 171, 226, 0) 100%);
}

button:hover {
//background-color: #1e3c72;
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 10px;
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  font-size: 14px;
}

</style>
